<template>
	<div class="buy subpage">
		<div class="pay-wrap" ref="wrap">
			<div class="head">
				<img src="https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/15697231204944065.png" alt="">
			</div>
			<div class="steps-wrap">
				<div class="steps">
					<img src="@/assets/img/home_img18.png" alt="">
				</div>
				<div class="flex-text">
					<span>发起求购</span>
					<span>实时报价</span>
					<span>确认下单</span>
					<span>购买成交</span>
				</div>
				<!-- <p class="txt">共<i>{{resData.applyNum}}</i>人在平台发起求购，已成交<i>{{resData.successNum}}</i>单</p> -->
			</div>
			<div class="buy-list">
				<div class="cell-list border-btm first-list">
					 <!-- @click="showPicker1 = true" -->
					<van-field readonly clickable label="品名" :value="cattleType.productName" placeholder="请选择品名" />
					<van-icon name="arrow" color="#CDCDCD" class="arrow" />
					<!-- <van-popup v-model="showPicker1" position="bottom">
						<van-picker show-toolbar title="请选择品名" :columns="cattleType" @cancel="showPicker1 = false" @confirm="onConfirm" />
					</van-popup> -->
				</div>
				<div class="cell-list border-btm">
					<van-field readonly clickable label="养殖地区" :value="postData.cattleAddress" placeholder="请选择养殖地区" @click="showYz" />
					<van-icon name="arrow" color="#CDCDCD" class="arrow" />
					
				</div>
				<div class="cell-list border-btm">
					<van-field readonly clickable label="单价" v-model="priceText" placeholder="请填写单价" @click="showOverlay" />
					<van-icon name="arrow" color="#CDCDCD" class="arrow" />
				</div>
				<div class="cell-list price-list border-btm">
					<span>整牛单价</span>
					<div class="odiv" v-if="(price * 650%1) === 0">{{ (price * 650)}}元/头</div>
					<div class="odiv" v-else>{{ (price * 650).toFixed(2) }}元/头</div>
				</div>
				<div class="cell-list stepper border-btm">
					<span>数量</span>
					<div>
						<van-stepper :max="16" v-model="value" @plus="addAction" @minus="minusdAction" />
					</div>
				</div>
				<div class="cell-list price-list border-btm">
					<span>总重量</span>
					<div class="odiv">{{product.product.totalWeight}}kg</div>
				</div>
				<div class="cell-list border-btm">
					<van-field readonly clickable label="交货期" :value="value5" placeholder="请选择交货期" @click="showPicker4 = true" />
					<van-icon name="arrow" color="#CDCDCD" class="arrow" />
					
				</div>
				<div class="cell-list footer-list">
					<span>共{{value}}头</span>
					<span v-if="(price*650*value%1) === 0">共计：{{price * 650  * value}}元</span>
					<span v-else>共计：{{ (price * 650  * value).toFixed(2) }}元</span>
				</div>
			</div>
			<div>
				<van-list
					v-model="loading"
					:immediate-check="false" 
					:finished="finished" 
					finished-text="已加载全部了哦～"
					@load="onLoadMore"
				>
					<list-common :orderListData="orderListData"></list-common>
				</van-list>
			</div>
		</div>
		
		<div class="btn-box" style="z-index: 1;">
			<van-button round class="u-btn-default bind-btn" @click="keepSave">
				发起求购
			</van-button>
		</div>

		<!-- 单价 -->
		<van-overlay :show="isOverlay" @click="show = false" />
		<div class="isOverlay" v-show="isOverlay">
			<div class="overlay-head">
				设置单价
				<van-icon name="cross" color="#31BC8D" tag="i" @click="hideOverlay" />
			</div>
			<div class="overlay-content">
				<!-- <p>*今日报价-安格斯牛：{{cattleObj.cattlePrice}}{{cattleObj.unit}}*</p> -->
				<div class="overlay-input">
					<van-field type="text" placeholder="请输入单价" v-model="newPrice" />
				</div>
				<div class="overlay-btn">
					<van-button round class="u-btn-default bind-btn" @click="comfirmPrice">确认</van-button>
				</div>
			</div>
		</div>
		
		<van-popup v-model="showPicker2" position="bottom">
			<van-picker show-toolbar title="请选择养殖地区" :columns="columns" @cancel="showPicker2 = false"
			 @confirm="yzConfirm" />
		</van-popup>
		
		<van-popup v-model="showPicker4" position="bottom">
			<van-datetime-picker v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmjh" @cancel="onCanceljh" :formatter="formatter" />
		</van-popup>
		
		<router-view></router-view>

	</div>
</template>
<script>
	import { formatDate } from '@/utils/date.js'
	import Storage from "@/utils/storage";
	
	import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
	import Vue from 'vue';
	import ListCommon from './ListCommon.vue'
	import { ActionSheet, Stepper, Picker, Field, Popup, Overlay, DatetimePicker, List } from 'vant';
	Vue.use(ActionSheet).use(Stepper).use(Picker).use(Field).use(Popup).use(Overlay).use(DatetimePicker).use(List);
	
	// 当前的月份到明年的月份
	let nextyear = new Date();
	nextyear.setFullYear(nextyear.getFullYear()+1);
	
	export default {
		components: {
			ListCommon
		},
		data() {
			return {
				isFooterShow: true,
				orderListData: [],
				cattleType: { // 品名
					
				},
				cattleQuote: [],   //  今日报价
				cattleObj:{   // 今日报价价格
				
				}, 
				resData: {},
				value2: '',
				showPicker1: false,   // 品名
				
				isOverlay: false,
				
				showPicker2: false,
				columns: [],   // 养殖地区
				value3: '',

				value: 1,
				currentDate: new Date(),
				minDate: new Date(),
				maxDate: nextyear,
				value4: '',

				value5: '',
				showPicker4: false,
				
				weight: '650',
				price: '',
				newPrice: '',
				
				loading: false,
				finished: false,
				pageIndex: 1,
				pageSize: 3,
				priceText: '',
				postData: {
					cattleAddress: '',   //	  供货地
					cattleConfigId: '',   // 牛配置id
					productWeight: 650,     //  商品重量
					salesPrice: '',      //牛肉单价
					totalPrice: '',       //总价
					totalWeight: '',      // 	总重量
					timeLimit: 12,		//  	养殖交割周期
					timeType: 1,     //  交割周期单位  1:月2：周3：天
					deliveryTime: '',     //  	供货日期
					totalNum: ''    //   数量,头
				}
			};
		},
		computed: {
			...mapState([
				'product'
			])
		},
		watch: {
			//  监听value变化  计算
			value: function(newVal,oldVal){
				if(newVal == ''){
					this.value = 1;
				}
				let weight = Number(this.value) * Number(this.weight * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
				let price = Number(this.value) * Number(this.price * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			},
			//  监听 牛肉重量
			weight: function(newVal,oldVal){
				let weight = Number(this.value) * Number(newVal * 1);  //  重量    数量 * 重量
				this.$store.commit('totalWeight', weight)
			},
			//  监听 牛肉金额
			price: function(newVal, oldVal){
				let price = Number(this.value) * Number(newVal * 1);   // 牛肉费用  数量 * 单价
				this.$store.commit('totalPrice', price)
			},
			newPrice: function(val){
				let price = val.match(/^\d*(\.?\d{0,2})/g)[0];
				this.newPrice = price;
			}
		},	
		created() {
			this.getbuyData()
			this.$store.commit('totalWeight', 650)
			// 避免刷新丢失数据
			if(Storage.get('count')){
				this.value = Storage.get('count');
			}
			if(Storage.get('price')){
				this.price = Storage.get('price');
			}
		},
		methods: {
			//   发起求购
			keepSave(){
				this.postData.cattleConfigId = this.cattleType.id;    // 牛配置id
				this.postData.salesPrice = this.price; // 单价
				this.postData.totalPrice = this.price * 650  * this.value;   // 总价格
				this.postData.totalWeight = this.product.product.totalWeight;  //  总重量
				this.postData.totalNum = this.value;      // 数量
				
				if(this.postData.cattleAddress == ''){
					this.$tool.toast('请选择养殖地区');
					return
				}
				if(this.postData.salesPrice == ''){
					this.$tool.toast('请填写单价');
					return
				}
				if(this.postData.deliveryTime == ''){
					this.$tool.toast('请选择交货期');
					return
				}
				console.log(this.postData)
				this.$api.post('/api/supply/publish', this.postData)
				.then((res)=>{
					console.log(res)
					if(res.code == 0){
						Storage.del('price');
						Storage.del('count');
						this.$router.push({
							path: '/buy/status',
							query: { item: JSON.stringify(res.data) }
						})
					}
				})
				
			},
			// 显示养殖地区弹框
			showYz(){
				this.showPicker2 = true;
				this.isFooterShow = false;
			},
			//    GET /api/supply/getData   求购首页相关数据
			getbuyData(){
				this.$api.get('/api/supply/getData?noLoading')
				.then(({data})=>{
					this.resData = data;    //  头部数据
					this.orderListData = data.indexOrderVos;  // 已成交求购订单
					this.cattleType = data.cattleType[1];   // 品名
					this.cattleQuote = data.cattleQuote;
					
					// 养殖地区
					let postData = {
						id: this.cattleType.id, // 牛id
						regionLevel: 1
					}
					this.$api.get('/api/supply/getCattleAddress?noLoading', postData)
					.then(({data})=>{
						this.columns.push('不限')
						data.map(e=>{
							this.columns.push(e.regionName)
						})
					})
				})
			},
			// 日期过滤
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				} else if (type === 'month') {
					return `${value}月`
				}
				return value;
			},
			// 品名
			onConfirm(value) {
				this.value2 = value;
				this.showPicker1 = false;
			},
			
			// 养殖地区确认
			yzConfirm(value) {
				this.postData.cattleAddress = value;
				this.showPicker2 = false;
			},
			// 单价遮罩层
			showOverlay() {
				this.newPrice = '';
				this.isOverlay = true;
				this.cattleQuote.map(item=>{
					if(this.cattleType.id == item.id){
						console.log(item)
						this.cattleObj = item;
					}
				})
			},
			// 隐藏遮罩层
			hideOverlay() {
				this.newPrice = '';
				this.isOverlay = false;
			},
			// 遮罩层确认按钮  今日报价
			comfirmPrice() {
				if (this.newPrice == '') {
					this.$toast('单价不能为空');
					return
				} else if(this.newPrice == 0){
					this.$toast('单价不能为0');
					this.newPrice = ''
					return
				} else if(this.newPrice > 99){
					this.$toast('请输入有效金额');
					return
				}
				this.price = this.newPrice;
				this.priceText = this.price + '元/kg';
				Storage.set('price', this.price);
				this.isOverlay = false;
			},
			// 交货期
			onCanceljh() {
				this.showPicker4 = false;
			},
			onConfirmjh(value) {
				let timestamp = Date.parse(value)
				this.value5 = formatDate(new Date(timestamp), 'yyyy年MM月');
				this.postData.deliveryTime = this.value5.replace('年', '-').replace('月',''); // 年月替换 ’/‘   交货期
				this.postData.deliveryTime = this.postData.deliveryTime + '-01';
				this.showPicker4 = false;
			},
			// 新增
			addAction() {
				++this.value;
				Storage.set('count', this.value)
			},
			//  减少   
			minusdAction() {
				--this.value;
				Storage.set('count', this.value)
			},
			// 上拉加载请求方法  这里只显示三条，假的上拉加载
			onLoadMore() {
				setTimeout(() => {
				    // 加载状态结束
				    this.loading = false;
					this.finished = true;
				}, 500);
			},
		}
	}
</script>
<style class="scss" scoped>
	.van-cell:not(:last-child)::after {
		border-bottom: none;
	}
</style>
<style lang="scss" scoped>
	@import "@/assets/css/homeCom.scss";
	$stepsColor: #31BC8D;
	.pay-wrap {
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
.buy{
	.head {
		width: 100%;
		height: 157px;
	
		img {
			width: 100%;
			height: 100%;
		}
	}
	
	.steps-wrap {
		padding: 23px 0 16px 0;
		background-color: #fff;
	
		.steps {
			width: 100%;
			height: 19px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 37px;
			margin-bottom: 10px;
	
			img {
				width: 244px;
			}
		}
	
		.flex-text {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 37px;
	
			span {
				color: $stepsColor;
			}
	
			margin-bottom: 16px;
		}
	
		.txt {
			color: #5D6164;
			text-align: center;
	
			i {
				color: #F58523;
			}
		}
	}
	.buy-list {
		background-color: #fff;
		margin-bottom: 10px;
	
		.first-list {
			border-top: 1px solid #f2f2f2;
		}
	
		.cell-list {
			position: relative;
	
			.arrow {
				position: absolute;
				z-index: 9;
				right: 16px;
				top: 14px;
			}
	
		}
	
		.price-list {
			width: 100%;
			height: 45px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			position: relative;
	
			.odiv {
				position: absolute;
				left: 28.8%;
			}
		}
	
		.footer-list {
			width: 100%;
			height: 45px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-bottom: none;
	
			span:first-child {
				margin-right: 16px;
			}
		}
	
		.stepper {
			width: 100%;
			height: 45px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 16px;
		}
	}
	.btn-box {
		width: 100%;
		text-align: center;
		background-color: #fff;
		padding: 10px 0 12px 0;
		width: 100%;
		box-shadow:2px 2px 5px #c2c2c2;
		-webkit-box-shadow:2px 2px 5px #c2c2c2;
		position: fixed;
		left: 0;
		bottom: 0;
		.bind-btn {
			width: 343px;
			background: linear-gradient(94deg, rgba(49, 188, 141, 1) 0%, rgba(166, 226, 155, 1) 100%);
			text-align: center;
		}
	}
	
	
}
	.border-btm {
		border-bottom: 1px solid #f2f2f2;
	}
	

	.isOverlay {
		width: 328px;
		background-color: #fff;
		border-radius: 10px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -164px;
		margin-top: -99px;
		z-index: 10;

		.overlay-head {
			width: 100%;
			height: 48px;
			line-height: 48px;
			color: #5D6164;
			font-size: 16px;
			text-align: center;
			background-color: #F8F8F8;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			font-weight: 500;

			i {
				display: inline-block;
				position: absolute;
				right: 16px;
				top: 0;
				line-height: 48px;
			}
		}

		.overlay-content {
			padding: 16px;

			p {
				color: #F58523;
				font-size: 12px;
				margin-bottom: 12px;
			}

			.overlay-input {
				width: 100%;
				border-bottom: 1px solid #E5E5E5;

				.van-cell.van-field {
					padding-left: 0;
				}
			}
		}

		.overlay-btn {
			width: 100%;
			height: 64px;
			display: flex;
			justify-content: center;
			align-items: center;

			.bind-btn {
				width: 138px;
				height: 44px;
				line-height: 44px;
				font-size: 16px;
				background: linear-gradient(94deg, rgba(49, 188, 141, 1) 0%, rgba(166, 226, 155, 1) 100%);
				box-shadow: none;
				float: right;
				box-shadow: 0 6px 10px #19884f66;
			}
		}
	}

	


	

	
</style>

<style lang="scss">
	.buy .van-cell__title span {
		position: relative;
		top: 3px;
	}

	.buy .van-overlay {
		z-index: 10 !important;
	}
</style>
